<template>
	<view class="container" :style="[ctop()]" v-if="item != null">
		<view :style="[top()]" class="top fixed">
			<view class="flex j-between a-center">
				<view class="flex a-center rule" @tap="back()">
					<u-icon name="arrow-left" size="40"></u-icon>
				</view>
				<view class="title ecllipse flex j-center">
					<view>{{item.title}}</view>
				</view>
				<view class="rule">任务规则</view>
			</view>
		</view>
		<view class="bg-top">
		</view>
		<view class="rela">
			<view class="panel flex j-center a-center">
				<view class="flex col j-center a-center">
					<view class="line1">{{item.shengyu_danshu}}/{{item.danshu}}</view>
					<view class="line2">{{item.task_juli}}</view>
					<view class="line3">剩余数量</view>
				</view>
				<u-line color="#fff" length="32" direction="col" style="margin: 0 100rpx;"></u-line>
				<view class="flex col j-center a-center">
					<view class="line1 flex a-end">
						<view class="num">{{item.jiangli}}</view>
						<view class="coin">金币</view>
					</view>
					<view class="line2">{{item.juli}}</view>
					<view class="line3">任务奖励</view>
				</view>
			</view>
			<view class="block">
				<view class="flex a-center">
					<u-icon name="info-circle-fill" size="48" color="#00D86A"></u-icon>
					<view class="info">请参照以下步骤完成任务</view>
				</view>
				<view class="title-name">1.点击复制口令，打开开始助力</view>
				<view class="link">链接：www.pdd.com</view>
				<view class="code">
					<image class="image"></image>
				</view>
				<view class="flex j-between a-center">
					<view class="flex j-center a-center copy">
						<view>复制口令</view>
					</view>
					<view class="flex j-center a-center down">
						<view>下载二维码</view>
					</view>
				</view>
				<view class="title-name">2.完成助力后截图保存，按照示例和要求上传截图</view>
				<view class="flex a-center j-between">
					<view class="eg">
						<image class="image" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
					</view>
					<view class="eg flex col j-center a-center upload">
						<u-icon name="plus-circle" size="63"></u-icon>
						<view>上传验证图片</view>
					</view>
				</view>
			</view>
			<view style="height: 150rpx;width: 100%;"></view>
			<view class="fixed opt flex j-between a-center">
				<view class="flex a-center" @tap="taskview">
					<view class="new">
						<image class="image" src="../static/icon/idx/new.png"></image>
					</view>
					<view>换个任务</view>
				</view>
				<view class="get flex j-center a-center" @tap="createrenwu">
					<view>报名任务</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(parms){
			this.id = parms.id
			this.taskview(this.id)
			uni.getLocation({
			    type: 'gcj02',
			    success: (res) => {
			        console.log('当前位置的经度：' + res.longitude)
			        console.log('当前位置的纬度：' + res.latitude)
			    },
				fail:(err) => {
					console.log(err)
				}
			})
		},
		data() {
			return {
				id:0,
				item:null,
			}
		},
		methods: {
			top(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:pdt+'px'}
			},
			ctop(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:(pdt+44)+'px'}
			},
			taskview(id){
				let url = {}
				if(id){
					url.id  = id
				}
				this.$api.taskview(url).then(res => {
					this.item = res.data
					this.id = this.item.id
				})
			},
			createrenwu(){
				this.$api.createrenwu({task_id:this.id,task_lng:0,task_lat:0}).then(res => {
					console.log(res.data)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{padding: 18rpx 24rpx;width: 100%;left:0;right: 0;top:0;z-index: 10;color: #FFF;
	background: #246FDD;
	.title{font-weight: bold;font-size: 36rpx;width: 400rpx;}
	.rule{font-size: 32rpx;width: 128rpx;}
}
.bg-top{position: absolute;top: 0;right: 0;left: 0;height: 504rpx;background: #246FDD;}
.panel{color: #FFF;margin-top: 66rpx;
	.line1{font-size: 36rpx;font-weight: bold;
		.coin{font-size: 24rpx;}
	}
	.line2,.line3{font-size: 24rpx;margin-top: 24rpx;}
}
.block{padding: 34rpx 24rpx 48rpx;background-color: #FFF;border-radius: 16rpx;margin-top: 48rpx;color: #333;
	.info{color: #333;font-size: 32rpx;font-weight: bold;margin-left: 24rpx;}
	.title-name{font-size: 28rpx;margin-top: 48rpx;}
	.link{font-size: 28rpx;margin-top: 24rpx}
	.code{width: 240rpx;height: 240rpx;margin: 48rpx auto 0;background-color: #333;}
	.copy{margin-top:48rpx;width: 316rpx;height: 88rpx;border-radius: 200rpx;background-color: #00D86A;color: #FFF;font-size: 32rpx;}
	.down{margin-top:48rpx;width: 316rpx;height: 88rpx;border-radius: 200rpx;background-color: #246FDD;color: #FFF;font-size: 32rpx;}
	.eg{width: 280rpx;height: 280rpx;border-radius: 16rpx;overflow: hidden;margin:48rpx 24rpx 0;}
	.upload{background-color: #F9F9F9;color: #999;font-size: 24rpx;}
}
.opt{height: 128rpx;background-color: #FFF;left: 0;right: 0;bottom: 0;font-size: 28rpx;color: #999999;padding: 0 24rpx;
	.new{width: 36rpx;height: 36rpx;margin-right: 24rpx;}
	.get{width: 320rpx;height: 88rpx;border-radius: 16rpx;background-color: #246FDD;color: #FFF;font-size: 32rpx;}
}
</style>
